<template>
  <div class="all-content">
    <BreadList :breadList="breadList"></BreadList>
    <div class="manage-content"
      v-loading="listLoading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <div class="search-content two short">
        <div class="search-item">模型
          <el-select 
            v-model="searchParams.modelId"
            placeholder="请选择模型"
            class="item-select"
            @change="modelChange">
            <el-option
              v-for="item in modelList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="search-item">数据集
          <el-select 
            v-model="searchParams.datasetId"
            placeholder="请选择数据集"
            class="item-select">
            <el-option
              v-for="item in dataSetList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="search-item">运行时间
          <el-date-picker
            class="item-select"
            v-model="searchParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button class="search-btn" type="primary" @click="getTableList(1, true)">搜索</el-button>
        <el-button class="search-btn no-left" @click="clearSearch">重置</el-button>
      </div>
      <div class="table-content">
        <div class="list" v-show="tableData.length > 0">
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%;height: 100%"
            height="100%">
            <el-table-column
              label="序号"
              type="index"
              width="68">
              <template slot-scope="scope">
                <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="任务结果名称"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.clueName" placement="top"> -->
                  <span class="desc-style">{{scope.row.clueName}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="clueNum"
              label="线索数"
              width="100">
            </el-table-column>
            <el-table-column
              prop="modelName"
              label="模型"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.modelName" placement="top"> -->
                  <span class="desc-style">{{scope.row.modelName}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="数据集"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.datasetName" placement="top"> -->
                  <span class="desc-style">{{scope.row.datasetName}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="运行时间"
              min-width="200">
            </el-table-column>
            <el-table-column
              prop="cluePushStatus"
              :formatter="cluePushStatusFormatter"
              label="线索状态"
              width="110">
            </el-table-column>
            <el-table-column
              prop="cluePushPlatformName"
              label="推送平台"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.cluePushPlatformName" placement="top"> -->
                  <span class="desc-style">{{scope.row.cluePushPlatformName}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120">
              <template slot-scope="scope">
                <span class="operate-item" @click="itemManage(scope.row)"><span class="icon icon-manage"></span>管理</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box" v-show="tableData.length > 0">
          <el-pagination
            class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="total, sizes, slot, prev, pager, next"
            :total="tablePageData.total">
            <span class="page-item first" @click="handleCurrentChange(1)">首页</span>
          </el-pagination>
          <el-pagination
            class="table-page"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="slot"
            :total="tablePageData.total">
            <span class="page-item" @click="handleCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
            <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handleCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handleCurrentChange(tablePageData.inputNum)"></el-input>页</span>
          </el-pagination>
        </div>
        <Empty v-show="tableData.length === 0" imgHeight="42%" />
      </div>
    </div>
  </div>
</template>

<script>
  import Empty from '../../components/empty';
  import { ClueResource, TaskResource } from '../../axios/index';
  import { mapActions } from 'vuex';
  import BreadList from '../../components/breadList';
  export default {
    name: 'ClueManageList',
    components: {
      Empty,
      BreadList
    },
    data() {
      return {
        // 搜索条件
        searchParams: {
          modelId: 0,
          datasetId: 0,
          time: []
        },
        oldSearchParams: {
          modelId: 0,
          datasetId: 0,
          time: []
        },
        // 表格相关
        listLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1
        },
        // 模型列表
        modelList: [
          {
            name: '全部',
            id: 0,
            datasetList: []
          }
        ],
        // 模型列表
        dataSetList: [
          {
            name: '全部',
            id: 0
          }
        ],
        // 面包屑列表
        breadList: [
          {
            modelName: 'clueManagelist',
            name: '线索管理'
          }
        ]
      }
    },
    mounted() {
      this.getModelList()
    },
    methods: {
      ...mapActions([
        'setActiveItem'
      ]),
      // 线索状态格式化
      cluePushStatusFormatter(row) {
        switch(row.cluePushStatus){
          case 1:
            return '未推送'
          case 2:
            return '已推送'
          default:
            return ''
        }
      },
      // 获取模型列表
      getModelList() {
        TaskResource
        .getModelList()
        .then(res => {
          if(res.data && res.data.length > 0) {
            this.modelList = this.modelList.concat(res.data);
            this.modelList.forEach(item => {
              if(item.id === this.searchParams.modelId) {
                if(item.datasetList && item.datasetList.length > 0) {  
                  // 切换对应的数据集
                  this.dataSetList = this.dataSetList.concat(item.datasetList);
                }
                this.getTableList();
              }
            })
          }
          else {
            this.getTableList();
          }
        })
        .catch(() => {
          this.getTableList();
        })
      },
      // 模型切换
      modelChange(val) {
        this.dataSetList = [
          {
            name: '全部',
            id: 0
          }
        ]
        this.modelList.forEach(item => {
          if(item.id === val) {
            // 切换对应的数据集
            if(item.datasetList && item.datasetList.length > 0) {
              this.dataSetList = this.dataSetList.concat(item.datasetList);
            }
            this.searchParams.datasetId = this.dataSetList[0].id;
          }
        })
      },
      // 获取列表数据
      getTableList(page, record) {
        if(page) {
          this.tablePageData.currentPage = page;
          this.tablePageData.inputNum = page;
        }
        if(record) {
          this.oldSearchParams = JSON.parse(JSON.stringify(this.searchParams));
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        ClueResource
        .list({
          modelId: this.searchParams.modelId,
          datasetId: this.searchParams.datasetId,
          startTime: this.searchParams.time[0],
          endTime: this.searchParams.time[1],
          pageNo: this.tablePageData.currentPage,
          pageSize: this.tablePageData.pageSize
        })
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res && res.data) {
            this.tablePageData.total = parseInt(res.data.total);
            if(res.data.records) {
              this.tableData = res.data.records.map(item => {
                let platList = [];
                if(item.cluePushPlatform && item.cluePushPlatform.length > 0) {
                  platList = item.cluePushPlatform.split('、');
                }
                item.cluePushPlatformName = '';
                platList.forEach(pitem => {
                  if(item.cluePushPlatformName.length > 0) {
                    item.cluePushPlatformName += '、'
                  }
                  item.cluePushPlatformName += pitem === '1' ? '线索管理平台' : pitem === '2' ? '统一业务系统' : '';
                })
                return item
              });
            }
          }
        })
        .catch(() => {
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 改变每页size
      handleSizeChange(val) {
        this.tablePageData.pageSize = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList(1)
      },
      // 切页
      handleCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList();
      },
      // 重置
      clearSearch() {
        this.searchParams = {
          modelId: 0,
          datasetId: 0,
          time: []
        }
        this.getTableList(1, true);
      },
      // 管理
      itemManage(item) {
        this.setActiveItem({
          data: true,
          clueId: item.id,
          clueName: item.clueName,
          collectionId: null,
          taskId: item.taskId
        })
        this.$router.push({path:'/ClueResultList'})
      }
    },
    computed: {
    }
  }
</script>

<style scoped lang="scss">
  .all-content {
    width: 100%;
    height: 100%;
  }
  .manage-content {
    width: 100%;
    height: calc(100% - 32px);
    padding: 0 24px;
    background-color: #fff;
  }
</style>
